<template>
    <div class="app-container">
        <h3>订单详情</h3>
        <table class="usertable">
            <tr>
                <th>
                    自增ID
                </th>
                <td>
                    {{detailOrder.id}}
                </td>
            </tr>
            <tr>
                <th>
                    订单号
                </th>
                <td>
                    {{detailOrder.orderSn}}
                </td>
            </tr>
            <tr>
                <th>
                    课程名称
                </th>
                <td>
                    {{detailOrder.courseName}}
                </td>
            </tr>
            <tr>
                <th>
                    应付金额
                </th>
                <td>
                    ￥{{detailOrder.discPrice|priceFormat}} 元
                </td>
            </tr>
            <tr>
                <th>
                    实付金额
                </th>
                <td>
                    ￥{{detailOrder.discPrice|priceFormat}} 元
                </td>
            </tr>
            <tr>
                <th>
                    用户手机号码
                </th>
                <td>
                    {{detailOrder.phone}}
                </td>
            </tr>
            <tr>
                <th>
                    订单状态
                </th>
                <td>
                    {{detailOrder.status|parseOrderStatus}}
                </td>
            </tr>
            <tr>
                <th>
                    创建时间
                </th>
                <td>
                    {{detailOrder.createTime|parseTime}}
                </td>
            </tr>
            <tr>
                <th>
                    支付时间
                </th>
                <td>
                    {{detailOrder.payTime|parseTime}}
                </td>
            </tr>
            <tr>
                <th>
                    支付方式
                </th>
                <td>
                    {{detailOrder.payType|parsePayType}}
                </td>
            </tr>
            <tr>
                <th>
                    支付流水号
                </th>
                <td>
                    {{detailOrder.payTradeId}}
                </td>
            </tr>
            <tr>
                <th>
                    订单来源
                </th>
                <td>
                    {{detailOrder.channel|parseChannel}}
                </td>
            </tr>
        </table>
    </div>
</template>

<script>

    import { getDetail } from '@/api/statorder';

    export default {
        data() {
            return {
                detailOrder: {}
            }
        },
        created() {
            const reg = /\/detail\/(\d*)$/
            if (reg.test(this.$route.path)) {
                const ID = RegExp.$1;
                this.getOrderDetail(ID);
            }
        },
        methods: {
            getOrderDetail(ID) {
                getDetail(ID).then(response => {
                    this.detailOrder = response.data;
                }).catch(err => {
                    console.log(err)
                });
            }
        }
    }
</script>

<style>
    .usertable {
        border: 1px solid #cccccc;
        width: 600px;
        text-align: center;
    }
    .usertable tr {
        border: 1px solid #cccccc;
    }
    .usertable th,td {
        border: 1px solid #cccccc;
        height: 30px;
        line-height: 30px;
    }
</style>